<template>
  <div class="">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">

      <el-form-item label="入院日期:" prop="logId">
        <el-date-picker v-model="queryParams.data" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>

      </el-form-item>

      <el-form-item label="住院号:" prop="logId">
        <el-input v-model="queryParams.logId" placeholder="请输入住院号" clearable style="width: 180px;" size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="医疗机构名称：" prop="executeResultCode">
        <el-select v-model="queryParams.executeResultCode" placeholder="请选择医疗机构名称" clearable size="small" style="width: 180px">
          <el-option :label="item.label" :value="item.value" v-for="item in orgList" :key="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>
    </el-form>

    <el-table ref="tables" v-loading="loading" :data="list" stripe highlight-current-row @selection-change="handleSelectionChange">

      <!-- <el-table-column type="selection" width="55" align="center" /> -->

      <el-table-column label="门(急)诊号" prop="logId" width="300" show-overflow-tooltip />
      <el-table-column label="库/表名" prop="schemaTable" width="300" show-overflow-tooltip />
      <el-table-column label="库/表名" prop="schemaTable" width="300" show-overflow-tooltip />
      <el-table-column label="库/表名" prop="schemaTable" width="300" show-overflow-tooltip />
      <el-table-column label="库/表名" prop="schemaTable" width="300" show-overflow-tooltip />
      <el-table-column label="操作时间" prop="createTime" width="150" show-overflow-tooltip />

       <el-table-column type="expand" width="1">
        <template slot-scope="scope">

          <!-- 展开详情数据 -->
          <expand-model :paramsList="[{
            id:1,
            name:'门(急)处方信息',
            list:[
            {
              id:1-1,
              name:'处方编号',
              value:scope.row.logId
            }, {
              id:1-2,
              name:'开处方日期',
              value:'2020-10-11'
            }, {
              id:1-3,
              name:' 开处方科室名称',
              value:'内科'
            }, {
              id:1-4,
              name:'开处方医生签名',
              value:'张丽'
            }, {
              id:1-5,
              name:'处方药品金额(元)',
              value:'358.00'
            }, {
              id:1-6,
              name:'处方审核药剂师姓名',
              value:'李磊'
            }, {
              id:1-7,
              name:' 处方调配药剂师签名',
              value:'张华'
            }, {
              id:1-8,
              name:'发药药剂师签名',
              value:'李磊'
            }, {
              id:1-9,
              name:' 处方备注信息',
              value:'无'
            }]
            },{
            id:2,
            name:'门(急)处方信息2',
            list:[
            {
              id:2-1,
              name:'处方编号',
              value:scope.row.logId
            }, {
              id:2-2,
              name:'开处方日期',
              value:'2020-10-11'
            }, {
              id:2-3,
              name:' 开处方科室名称',
              value:'内科'
            }, {
              id:2-4,
              name:'开处方医生签名',
              value:'张丽'
            }, {
              id:2-5,
              name:'处方药品金额(元)',
              value:'358.00'
            }, {
              id:2-6,
              name:'处方审核药剂师姓名',
              value:'李磊'
            }, {
              id:2-7,
              name:' 处方调配药剂师签名',
              value:'张华'
            }, {
              id:2-9,
              name:'发药药剂师签名',
              value:'李磊'
            }, {
              id:2-0,
              name:' 处方备注信息',
              value:'无'
            }]
            },
          ]"></expand-model>
          <!-- 展开详情数据 end-->

          <!-- 展开详情  -->
          <!-- <ul class="scope-wrapper">
            <li>
              <div class="scope-title">门(急)处方信息</div>
              <div class="scope-list">
                <span>处方编号：{{scope.row.logId}}</span>
                <span>开处方日期：2020-10-11</span>
                <span> 开处方科室名称：内科</span>
                <span> 开处方医生签名：张丽</span>
                <span>处方药品金额(元)：358.00</span>
                <span>处方审核药剂师姓名：李磊</span>
                <span>处方调配药剂师签名：张华</span>
                <span>发药药剂师签名：李磊</span>
                <span>处方备注信息：无</span>
              </div>
            </li>
            <li>
              <div class="scope-title">门(急)处方信息</div>
              <div class="scope-list">
                <span>处方编号：2545126</span>
                <span>开处方日期：2020-10-11</span>
                <span>开处方科室名称：内科</span>
                <span>开处方医生签名：张丽</span>
                <span>处方药品金额(元)：358.00</span>
                <span>处方审核药剂师姓名：李磊</span>
                <span>处方调配药剂师签名：张华</span>
                <span>发药药剂师签名：李磊</span>
                <span>处方备注信息：无</span>
              </div>
            </li>
            <li>
              <div class="scope-title">门(急)处方信息</div>
              <div class="scope-list">
                <span>处方编号：2545126</span>
                <span>开处方日期：2020-10-11</span>
                <span> 开处方科室名称：内科</span>
                <span> 开处方医生签名：张丽</span>
                <span>处方药品金额(元)：358.00</span>
                <span>处方审核药剂师姓名：李磊</span>
                <span>处方调配药剂师签名：张华</span>
                <span>发药药剂师签名：李磊</span>
                <span>处方备注信息：无</span>
              </div>
            </li>
          </ul> -->

        </template>
      </el-table-column>

      <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">

          <el-button size="mini" type="text" :icon="currentItemId==scope.row.logId?'el-icon-arrow-up':'el-icon-arrow-down'" @click="toogleExpand(scope.row)">{{currentItemId==scope.row.logId?'收起':'展开'}}</el-button>

          <el-button size="mini" type="text" icon="el-icon-download" @click="handleExport(scope.row)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :page-sizes="[8,10, 20, 30, 50]" :limit.sync="queryParams.pageSize" @pagination="getList" />

  </div>
</template>

<script>

import { listLog } from "@/api/areaSystem/synchronizationLog";

/* table 展开数据列表  */
import expandModel from './../../model/expandModel.vue'

export default {
  //接收父组件传过来的值
  props: ['params'],

  /* table 展开数据列表  */
  components: { expandModel },

  data() {
    return {
      // 遮罩层
      loading: true,

      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],

      //当前行id
      currentItemId: '',

      //就诊机构 列表
      orgList: [{
        id: 0,
        value: '',
        label: '全部'
      }, {
        id: 1,
        value: '1',
        label: '陇西县第一人民医院'
      }, {
        id: 2,
        value: '2',
        label: '陇西县第二人民医院'
      }],


      // 挂退号标志 列表
      registerTipList: [{
        id: 0,
        value: '',
        label: '全部'
      }, {
        id: 1,
        value: '1',
        label: '挂号'
      }, {
        id: 2,
        value: '2',
        label: '退号'
      }],

      // 急诊标识 列表
      emergencyTreatmentTipList: [{
        id: 0,
        value: '',
        label: '全部'
      }, {
        id: 1,
        value: '1',
        label: '急诊'
      }, {
        id: 2,
        value: '2',
        label: '普通'
      }],

      /* 选择日期 快捷数据 */
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },


      // 表单参数
      form: {},
      // 查询参数
      queryParams: {

        //执行结果
        executeResultCode: '',
        //日志id
        logId: '',
        createTime: '',
        updateTime: '',
        pageNum: 1,
        pageSize: 8

      }
    };
  },
  created() {
    //接收父组件传过来的值
    console.log("入院记录params", this.params)

    this.getList();
  },
  methods: {
    /** 查询同步日志 */
    getList() {
      this.loading = true;
      listLog(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      }
      );
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");

      this.handleQuery();
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.operId)
      this.multiple = !selection.length
    },

    /* 展开操作 */
    toogleExpand(row) {

      //当前行id
      this.currentItemId = row.logId

      let $table = this.$refs.tables;
      this.list.map((item) => {
        if (row.logId != item.logId) {
          $table.toggleRowExpansion(item, false)
        }
      })
      $table.toggleRowExpansion(row)

    },
    /** 导出按钮操作 */
    handleExport(row) {
      console.log("导出按钮操作", row)
    },

  }
};
</script>
